<template>
<div class="login">
    <div>
        <div >
            <a-icon type="shopping-cart"/>
            <span style="margin-left: 15px; color: #E8E8E8">|</span>
            <div @click="showModal" v-if="$store.state.isLogin" class="point">登录/注册</div>
            <div v-if="!$store.state.isLogin">{{$store.state.userinfo.nickname}}</div>
            <div class="personCenter" v-if="$store.state.isLogin"><a-icon  type="user" style="color: white" /></div>
                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick">
                        <a-menu-item key="1"> <router-link to="/Mine">个人中心</router-link></a-menu-item>
                        <a-menu-item key="2"> 阿巴阿巴</a-menu-item>
                        <a-menu-item key="3" @click="exitL"> 退出登录</a-menu-item>
                    </a-menu>
                    <span v-show="!$store.state.isLogin"><img class="imgUser" :src="$store.state.userinfo.avatarUrl" alt=""></span>
                </a-dropdown>
        </div>
        <a-modal  v-model="$store.state.visible" @ok="handleOk" :footer="null">
            <div>
                <a-tabs default-active-key="1" >
                    <a-tab-pane key="1" tab="账号登录">
                        <a-form layout="vertical" :form="form" @submit="handleSubmit">
                            <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                                <a-input
                                        v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入账号' }] },
        ]"
                                        placeholder="请输入账号"
                                >
                                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                                </a-input>
                            </a-form-item>
                            <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                                <a-input
                                        v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码' }] },
        ]"
                                        type="password"
                                        placeholder="请输入密码"
                                >
                                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-button style="width: 272px" type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                                    登录
                                </a-button>
                                <ul class="inputUl">
                                    <li><register></register></li>
                                    <li><forgotPassword></forgotPassword></li>
                                </ul>
                            </a-form-item>
                        </a-form>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="手机号登录" force-render>
                        <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                            <a-input
                                    v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入手机号' }] },
        ]"
                                    placeholder="请输入手机号"
                            >
                                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-item>
                        <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                            <a-input style="width: 60%"
                                    v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入验证码' }] },
        ]"
                                    type="password"
                                    placeholder="请输入验证码"
                            >
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                            <a-button type="primary" style="margin-left: 6px">
                                获取验证码
                            </a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button style="width: 272px" type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                                登录
                            </a-button>
                            <ul class="inputUl">
                                <li><register></register></li>
                                <li><forgotPassword></forgotPassword></li>
                            </ul>
                        </a-form-item>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-modal>
    </div>
</div>
</template>

<script>
    import {getUserInfo, login} from '../../api/api'
    import register from "./register"
    import forgotPassword from'./forgotPassword'
    function hasErrors(fieldsError) {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    export default {
        name: "login",
        components:{register,forgotPassword},
        created() {
            console.log(this.$store.state.isLogin)
            getUserInfo().then(res=>{
                console.log(res)
                if(res.code == 0){
                    this.$store.state.isLogin= false
                    this.$store.state.userinfo = res.userInfo
                }
            })
        },
        methods: {
            handleMenuClick(e) {
                console.log('click', e);
            },

            infor() {
                this.$message.error('账号/密码错误');
            },
            userNameError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('userName') && getFieldError('userName');
            },
            passwordError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    //    登录
                        login(values.userName,values.password).then(res=>{
                            console.log(res)
                            if(res.code == 0){
                                this.$message.success(res.msg)
                                this.$store.commit('changelogin',false)
                                    this.$store.commit('changeLogin',{isLogin:false})
                                this.$store.state.userinfo=res.userInfo
                            }else{
                                this.infor()
                            }
                        })
                    }
                });
            },
            exitL(){
              this.$axios.get('/course-api/pcUser/logout').then(res=>{
                  console.log(res)
                  this.$store.commit('changeLogin',{isLogin:true})
                  this.$store.commit('changeinfo',{})
                  console.log(this.$store.state.userinfo)
              })
            },


            showModal() {
                this.$store.commit('changelogin',true)
            },
            handleOk(e) {
                console.log(e);
                this.$store.commit('changelogin',false)
            },
        },

        mounted() {
            this.$nextTick(() => {
                // To disabled submit button at the beginning.
                this.form.validateFields();
            });
        },
        data(){
            return{
                xiala:'',
                hasErrors,
                form: this.$form.createForm(this, { name: 'horizontal_login' }),
                visible: false,
            }
        }
    }
</script>

<style scoped lang="less">
    .point:hover {
        cursor: pointer;
    }
    .imgUser {
        width: 32px;
        height: 32px;
        border-radius: 16px;
    }
    .userinfoImg{
        border-radius: 50%;
        width: 32px;
        height: 32px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    /deep/.ant-modal-content{
        margin-left: 80px;
        padding: 20px;
        width: 360px;
        /*height: 310px;*/
    }
    /deep/.inputP {
        width: 160px;
    }
    /deep/.ant-tabs-nav .ant-tabs-tab{
        margin-left: 17px;
    }
    .inputUl {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        li:first-child {
            float: left;
        }
        li:last-child {
            float: right;
        }
    }
    /*登录主体部分*/
    .personCenter {
        display: inline-block;
        width: 32px;
        height: 32px;
        background-color: #BFBFBF;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
    }
    .login {
        height: 60px;
        padding-left: 140px;
        font-size: 20px;
        color: #B3B3B3;
        /deep/ div {
        margin: 0px 8px;
            color: black;
        display: inline-block;
        font-size: 16px;
    }
    }

</style>